<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue---购物车</title>
    <!-- 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
    <style>
        table,tr,th,td{
            border:1px solid black;
        }
        table{
            text-align:center;
            width: 800px;
        }
        input{
            width: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 用Vue创建购物车 -->
    <table class="box">
        <tr>
            <th>店家宝贝</th>
            <th>获积分</th>
            <th>单价（元）</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list">
            <td>{{item.name}}</td>
            <td>{{item.jifen}}</td>
            <td>{{item.danjia}}</td>
            <td>
                <button v-on:click="jian">-</button>
                <input type="text" v-model="msg">
                <button v-on:click="jia">+</button>
            </td>
            <td>{{item.danjia * this.msg}}</td>
            <td>{{item.caozuo}}</td>
        </tr>
    </table>
    <script>
        let vm = new Vue({
            //规定在哪个元素中使用vue语法
            el:'.box',
            //data中的数据会加到vue响应系统中，值发生改变，视图中也会发生改变
            data:{
                msg:0,//设置数量的初始值
                list:[
                    {
                        name:'靴子',
                        jifen:5,
                        danjia:138,
                        // num:1,
                        // xiaoji:this[0].danjia * this[0].num,
                        caozuo:'删除',
                    },
                    {
                        name:'靴子',
                        jifen:5,
                        danjia:138,
                        // num:1,
                        // xiaoji:danjia*num,
                        caozuo:'删除'
                    },
                    {
                        name:'靴子',
                        jifen:5,
                        danjia:138,
                        // num:1,
                        // xiaoji:danjia*num,
                        caozuo:'删除'
                    }
                ]
            },
            methods:{
                    jia(){
                        this.msg++;
                    },
                    jian(){
                        this.msg--;
                    }
                }
        });

    </script>
</body>
</html>